@tailwind base;
@tailwind components;
@tailwind utilities;

/* ====== 前台页面工具类合并 ====== */
/* 来源：题库前台管理页面完整设计/pages/ 目录下的所有页面 */
@layer utilities {
  /* 内容可见性 */
  .content-auto {
    content-visibility: auto;
  }
  
  /* 滚动条隐藏 */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  /* 文字阴影 */
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  /* 卡片悬停效果 */
  .card-hover {
    transition: all 0.3s ease;
  }
  
  .card-hover:hover {
    transform: translateY(-5px);
  }
  
  /* 渐变背景 */
  .bg-gradient-primary {
    background: linear-gradient(135deg, #165DFF 0%, #0E42B3 100%);
  }
  
  /* 进度环 */
  .progress-ring-circle {
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }
  
  /* 浮动动画 */
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  
  /* 按钮样式 */
  .btn-primary {
    @apply px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors;
  }
  
  .btn-secondary {
    @apply px-4 py-2 bg-white text-primary border border-primary rounded-lg hover:bg-primary/5 transition-colors;
  }
  
  .btn-outline {
    @apply px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors backdrop-blur-sm;
  }
  
  /* 导航链接 */
  .nav-link {
    @apply text-gray-600 hover:text-primary transition-colors;
  }
  
  .nav-link-active {
    @apply text-primary font-medium border-b-2 border-primary pb-1;
  }
  
  /* 搜索框 */
  .search-input {
    @apply pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all;
  }
  
  /* 统计卡片 */
  .stat-card {
    @apply bg-white rounded-xl shadow-sm p-5 card-hover text-center;
  }
  
  /* 学科图标容器 */
  .subject-icon {
    @apply w-16 h-16 mx-auto mb-3 rounded-full flex items-center justify-center text-2xl;
  }
  
  /* 进度条 */
  .progress-bar {
    @apply h-2 rounded-full bg-gray-200 overflow-hidden;
  }
  
  .progress-value {
    @apply h-full rounded-full transition-all duration-1000 ease-out;
  }
  
  /* 标签样式 */
  .tag {
    @apply px-3 py-1 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm;
  }
  
  .tag-secondary {
    @apply px-3 py-1 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors text-sm;
  }
  
  /* 用户头像 */
  .user-avatar {
    @apply w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-medium;
  }
  
  /* 状态标签 */
  .status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .status-success {
    @apply bg-green-100 text-green-800;
  }
  
  .status-warning {
    @apply bg-yellow-100 text-yellow-800;
  }
  
  .status-danger {
    @apply bg-red-100 text-red-800;
  }
  
  /* 表单样式 */
  .form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all;
  }
  
  .form-select {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all bg-white;
  }
  
  .form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none transition-all resize-vertical;
  }
  
  /* 模态框样式 */
  .modal-overlay {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50;
  }
  
  .modal-content {
    @apply relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white;
  }
  
  .modal-header {
    @apply flex items-center justify-between mb-4;
  }
  
  .modal-title {
    @apply text-lg font-medium text-gray-900;
  }
  
  .modal-close {
    @apply text-gray-400 hover:text-gray-600 transition-colors;
  }
  
  .modal-body {
    @apply mb-4;
  }
  
  .modal-footer {
    @apply flex items-center justify-end space-x-3;
  }
  
  /* 加载动画 */
  .loading-spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-primary rounded-full animate-spin;
  }
  
  /* 空状态 */
  .empty-state {
    @apply text-center py-12;
  }
  
  .empty-state-icon {
    @apply mx-auto h-12 w-12 text-gray-400;
  }
  
  .empty-state-title {
    @apply mt-2 text-sm font-medium text-gray-900;
  }
  
  .empty-state-description {
    @apply mt-1 text-sm text-gray-500;
  }
  
  /* 工具提示 */
  .tooltip {
    @apply absolute z-10 px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200;
  }
  
  /* 响应式工具类 */
  @media (max-width: 640px) {
    .mobile-hidden {
      display: none;
    }
    
    .mobile-full {
      width: 100%;
    }
  }
  
  @media (min-width: 641px) {
    .desktop-hidden {
      display: none;
    }
  }
  
  /* 错误页面样式 */
  .error-container {
    @apply min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8;
  }
  
  .error-content {
    @apply max-w-md w-full space-y-8;
  }
  
  .error-icon {
    @apply mx-auto h-12 w-12 text-gray-400;
  }
  
  .error-title {
    @apply mt-6 text-center text-3xl font-extrabold text-gray-900;
  }
  
  .error-description {
    @apply mt-2 text-center text-sm text-gray-600;
  }
  
  /* 帮助中心样式 */
  .help-section {
    @apply bg-white rounded-lg shadow-sm p-6 mb-6;
  }
  
  .help-title {
    @apply text-xl font-semibold text-gray-900 mb-4;
  }
  
  .help-list {
    @apply space-y-4;
  }
  
  .help-item {
    @apply flex items-start space-x-3 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors;
  }
  
  /* 个人资料样式 */
  .profile-card {
    @apply bg-white rounded-lg shadow-sm p-6;
  }
  
  .profile-header {
    @apply flex items-center space-x-4 mb-6;
  }
  
  .profile-avatar {
    @apply w-20 h-20 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 text-2xl font-bold;
  }
  
  .profile-info {
    @apply flex-1;
  }
  
  .profile-name {
    @apply text-xl font-semibold text-gray-900;
  }
  
  .profile-email {
    @apply text-gray-600;
  }
  
  /* 设置页面样式 */
  .settings-section {
    @apply bg-white rounded-lg shadow-sm p-6 mb-6;
  }
  
  .settings-title {
    @apply text-lg font-medium text-gray-900 mb-4;
  }
  
  .settings-form {
    @apply space-y-6;
  }
  
  .form-group {
    @apply space-y-2;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700;
  }
  
  .form-help {
    @apply text-sm text-gray-500;
  }
  
  /* 导航项样式 */
  .nav-item {
    @apply relative;
  }
  
  .nav-item::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #165DFF;
    transition: width 0.3s ease;
  }
  
  .nav-item.active::after,
  .nav-item:hover::after {
    width: 100%;
  }
  
  /* 搜索容器 */
  .search-container {
    @apply relative;
    transition: all 0.3s ease;
  }
  
  .search-container:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(22, 93, 255, 0.15);
  }
  
  /* 移动端菜单按钮 */
  .mobile-menu-btn {
    @apply hidden items-center justify-center w-10 h-10 rounded-lg bg-gray-100 text-primary border-none cursor-pointer;
  }
  
  @media (max-width: 768px) {
    .mobile-menu-btn {
      @apply flex;
    }
  }
  
  /* 动画效果 */
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
  }
  
  .animate-slide-up {
    animation: slideUp 0.5s ease-out forwards;
  }
  
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* 内容可见性 */
  .content-auto {
    content-visibility: auto;
  }
  
  /* 滚动条隐藏 */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  /* 文字阴影 */
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  /* 卡片悬停效果增强 */
  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  }
  
  /* 进度环 */
  .progress-ring-circle {
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }
}
